<template>
  <div>
    <el-dialog title="题目预览" :visible.sync="show" width="60%" @close="close">
      <!-- 上面的七个(
        题型questionType、编号id、难度difficulty、标签tags、学科subjectID、目录catalogID、方向direction) -->
      <el-row>
        <el-col :span="6">
            <div class="grid-content bg-purple">【题型】：{{questionTypeFn(data.questionType)}}</div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple-light">【编号】：{{data.id}}</div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">【难度】：{{difficultyFn(data.difficulty)}}</div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple-light">【标签】：{{data.tags}}</div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">【学科】：{{data.subjectID}}</div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple-light">【目录】：{{data.catalogID}}</div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content bg-purple">【方向】：{{data.direction}}</div>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <hr>

        <!-- 题干 -->
      <el-row>
        <el-col :span="24">
            <div class="grid-content bg-purple">【题干】：</div>
        </el-col>
        <!-- 单选 -->
        <el-col :span="24" v-if="data.questionType === '1'">
            <div style="margin-top:-15px;">单选题目：（以下选中的选项为正确答案）</div>
        </el-col>
        <!-- 多选 -->
        <el-col :span="24"  v-else-if="data.questionType === '2'">
            <div style="margin-top:-15px;">多选题：（以下选中的选项为正确答案）</div>
        </el-col>
        <el-col :span="24" v-else-if="data.questionType === '3'">
            <div style="margin-top:-15px;">简答题：（以下选中的选项为正确答案）</div>
        </el-col>

      </el-row>
      <!-- 分割线 -->
      <hr>
      <!-- 参考答案 -->
       <el-row>
        <el-col :span="24">
            <span class="grid-content bg-purple">【参考答案】：</span>
           <el-button type="danger" @click="vidioShow = true">视频答案预览</el-button><br>
          <video :src="data.videoURL" controls="controls" v-if="vidioShow" ></video>
        </el-col>
       </el-row>
       <!-- 分割线 -->
      <hr>
      <!-- 答案解析 -->
       <el-row>
        <el-col :span="24">
            <span class="grid-content bg-purple">【答案解析】：{{ data.answer }}</span>
        </el-col>
       </el-row>
       <!-- 分割线 -->
      <hr>
      <!-- 参考答案 -->
       <el-row class="foot">
        <el-col :span="24">
            <span class="grid-content bg-purple">【题目备注】：{{ data.remarks }}</span>
        </el-col>
       </el-row>
       <!-- 关闭按钮 -->
         <div class="btn">
             <el-button size="primary" style="float:right" @click="close">关闭</el-button>
         </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入数据字典(难度 | 题型 )
import { difficulty, questionType } from '@/api/hmmm/constants'

export default {
  props: {
    // 控制弹层显隐
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      questionType,
      difficulty,
      // 控制视频显隐
      vidioShow: false
    }
  },
  methods: {
    close () {
      // 传给父元素关闭按钮功能
      this.$emit('close')
    },
    // 格式化难度
    difficultyFn (type) {
      // console.log(this.difficulty, type)
      const map = {}
      this.difficulty.forEach((item) => {
        map[item.value] = item.label
      })
      return map[type]
    },
    // 格式化题型
    questionTypeFn (type) {
      // console.log(this.difficulty, type)
      const map = {}
      this.questionType.forEach((item) => {
        map[item.value] = item.label
      })
      return map[type]
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 10px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
    &:last-child {
      margin-bottom: 20px;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
    .btn{
        padding: 30px 0;
    }

</style>
